<template>
    <div class="permissionsManage">
        <editUser :type="type" :permissions="permissions" :userInfo="userInfo" v-if="show_Edit" @back="back"></editUser>
        <div :style="{height: show_Edit ? 0 : 'auto', overflow: 'hidden'}">
            <div class="search-box">
                <div class="search-user">
                    <el-input v-model="searchForm.key" class="search-input" placeholder="搜索关键字" style="width: 200px;"></el-input>
                    <div class="search-btn" @click="clickSearch">查询</div>
                </div>
                <div class="create-btn" @click="createUser">
                    新建
                </div>
            </div>
            <el-table
                :data="operationList"
                border
                tooltip-effect="dark"
                style="width: 100%; height: calc(100vh - 280px);overflow: auto;"
                >
                <el-table-column
                    prop="adminId"
                    align="center"
                    label="序号"
                    width="100">
                </el-table-column>
                <el-table-column
                    prop="name"
                    align="center"
                    label="员工姓名">
                </el-table-column>
                <el-table-column
                    prop="sex"
                    label="性别"
                    align="center"
                    width="160">
                    <template slot-scope="scope">
                        <div>{{scope.row.sex == 0 ? "女" : scope.row.sex == 1 ? "男" : ""}}</div>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="position"
                    align="center"
                    label="职务">
                </el-table-column>
                <el-table-column
                    prop="loginName"
                    align="center"
                    label="登录账号">
                </el-table-column>
                <el-table-column
                    label="启用"
                    align="center"
                    width="160">
                    <template slot-scope="scope">
                        <div>{{scope.row.isDel === 0 ? "已启用" : "已禁用"}}</div>
                    </template>
                </el-table-column>
                <!-- <el-table-column
                    prop="userVersion"
                    align="center"
                    label="启用"
                    width="160">
                    <template slot-scope="scope">
                        <el-switch
                            size="mini"
                            v-model="scope.row.isOn"
                            @change="change(scope.row)"
                            active-value="1"
                            inactive-value="0"
                            active-color="#13ce66"
                            inactive-color="#ff4949">
                        </el-switch>
                    </template>
                </el-table-column> -->
                <el-table-column
                    label="操作"
                    align="center"
                    width="120">
                    <template slot-scope="scope">
                        <div>
                            <el-button class="checkCard" @click="editUser(scope.row)" type="text" style="color: #51cdcb;" size="medium">编辑</el-button>
                            <el-button class="checkCard" v-if="scope.row.isDel === 0" @click="delUser(scope.row)" type="text" style="color: #FF5C6C;" size="medium">禁用</el-button>
                            <el-button class="checkCard" v-if="scope.row.isDel === 1" @click="delUser(scope.row)" type="text" style="color: #51cdcb;" size="medium">启用</el-button>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
            <div class="page">
                <el-pagination
                    @current-change="handleCurrentChange"
                    :current-page.sync="pageNum"
                    :page-sizes="[10]"
                    :page-size="10"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
                </el-pagination>
            </div>
        </div>
    </div>
</template>
<script>
import { selectAdminListApi, selectMenuListApi, saveAdminApi, inserAdminRoleApi, delAdminApi } from "@/api/api.js";
import { setLocalStorage, getLocalStorage } from "@/utils/util.js";
export default {
    components: {
        editUser: () => import ("@/components/edit-user.vue")
    },
    data(){
        return{
            userInfo: {
                userName: '',
                passWord: '',
                name: '',
                sex: 1,
                job: ''
            },
            permissions: [],
            show_Edit: false,
            type: '',
            searchForm: {
                key: ''
            },
            pageNum: 1,
            total: 0,
            operationList: []
        }
    },
    created() {
        this.selectAdminList();
        this.selectMenuList();
    },
    mounted() {

    },
    methods: {
        selectAdminList(){
            let params = {
                loginName: this.searchForm.key,
                pageNum: this.pageNum
            }
            selectAdminListApi(params).then(res => {
                if (res.code == 200) {
                    this.total = res.data.pageInfo.total;
                    let operationList = res.data.pageInfo.list;
                    this.operationList = operationList;
                } else {
                    this.operationList = [];
                    this.$message({
                        message: res.message,
                        type: 'warning'
                    });
                }
            }).catch(err => {
                this.operationList = [];
            })
        },
        selectMenuList(){
            selectMenuListApi().then(res => {
                this.getPermissions(res.data)
            })
        },
        clickSearch(){
            this.pageNum = 1;
            this.selectAdminList();
        },
        handleCurrentChange(){
            this.search();
        },
        change(item){
        },
        checkCard(item){
        },
        createUser(){
            this.permissions = JSON.parse(getLocalStorage("allPermissions"));
            this.userInfo = {
                loginName: '',
                passWord: '',
                name: '',
                sex: 1,
                position: ''
            };
            this.type = "create";
            this.show_Edit = true;
        },
        editUser(data){
            this.userInfo = {
                adminId: data.adminId,
                loginName: data.loginName,
                passWord: '',
                name: data.name,
                sex: data.sex,
                position: data.position
            };
            let allPermissions = JSON.parse(getLocalStorage("allPermissions"));
            allPermissions.map(item => {
                item.permissions.map(item2 => {
                    if (data.modelList) {
                        data.modelList.forEach(item3 => {
                            if (item2.menuId == item3.menuId) {
                                if (item.userpermissions.indexOf(item3.menuId) == -1) {
                                    item.userpermissions.push(item3.menuId);
                                }
                            }
                        });
                    }
                });
                if (item.permissions.length === item.userpermissions.length) {
                    item.checkAll = true;
                }
            });
            this.permissions = allPermissions;
            this.type = "edit";
            this.show_Edit = true;
        },
        delUser(item){
            let params = {
                adminId: item.adminId,
                isDel: item.isDel === 0 ? 1 : 0
            };
            delAdminApi(params).then(res => {
                this.$message({
                    message: params.isDel ===  1 ? "禁用成功，重新加载数据" : "启用成功，重新加载数据",
                    type: 'success'
                });
                this.selectAdminList();
            })
        },
        getPermissions(data){
            let allPermissions = [];
            data.forEach(item => {
                let obj = {
                    name: item.value,
                    permissions: [],
                    menuId: item.menuId,
                    checkAll: false,
                    userpermissions: []
                }
                if (!item.menuModelList) {
                    let obj2 = {
                        name: item.value,
                        desc: item.adjective,
                        menuId: item.menuId
                    };
                    obj.permissions.push(obj2);
                } else {
                    item.menuModelList.forEach(item2 => {
                        let obj2 = {
                            name: item2.value,
                            desc: item2.adjective,
                            menuId: item2.menuId
                        };
                        obj.permissions.push(obj2);
                    });
                }
                allPermissions.push(obj)

            });
            setLocalStorage("allPermissions", JSON.stringify(allPermissions));
        },
        back(type){
            this.show_Edit = false;
            if (type == "updata") {
                this.selectAdminList();
            }
        }
    }
}
</script>
<style lang="scss">
.permissionsManage{
    .search-box{
        display: flex;
        justify-content: space-between;
        margin-bottom: 10px;
        .search-user{
            display: flex;
            .search-input{
                height: 30px;
                margin-right: 10px;
                .el-input__inner{
                    height: 30px;
                }
            }
            .search-btn{
                border-radius: 4px;
                // background: #B9EBEA;
                background: #51CDCB;
                font-size: 14px;
                line-height: 30px;
                height: 30px;
                color: #fff;
                padding: 0 20px;
                cursor: pointer;
            }
            .disabled{
                background: #B9EBEA;
            }
        }
        .create-btn{
            border-radius: 4px;
            // background: #B9EBEA;
            background: #51CDCB;
            font-size: 14px;
            line-height: 30px;
            height: 30px;
            color: #fff;
            padding: 0 20px;
            cursor: pointer;
        }
    }
    .page{
        background: #fff;
        padding: 10px 0;
        text-align: center;
    }
}
</style>
